<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <meta http-equiv='X-UA-Compatible' content='ie=edge'>
    <title>Document</title>
    <style>
        /* 精确查找当前被点击的路由链接router-link  */
        .router-link-exact-active {
            background-color: pink;
        }
    </style>
</head>

<body>
    <!-- node中 后端路由  请求方式和请求的地址被服务器监听到之后,数据库的增删改查操作,返回给前端数据 -->
    <!-- 前端路由 -->

    <div id='app'>
        <!-- a标签   to属性  相当于a标签href属性 -->
        <router-link to="/music">音乐</router-link>
        <router-link to="/movie">电影</router-link>
        <router-link to="/news">新闻</router-link>
        <router-link to="/play">娱乐</router-link>
        <!-- 路由占位   可以简写为单标签-->
        <!-- <router-view></router-view> -->
        <router-view />
    </div>

    <!-- 1.引入vue和vue-router -->
    <script src='../js/vue.js'></script>
    <script src="../js/vue-router.js"></script>
    <script>
        // 2.创建组件
        const music = {
            template: `<div>
                <h2>音乐列表</h2>
                <router-link to="/music/rock">摇滚音乐</router-link>
                <router-link to="/music/classical">古典音乐</router-link>
                <router-link to="/music/pop">流行音乐</router-link>
                <router-view></router-view>
                </div>`
        };
        const movie = {
            template: `<div>电影列表</div>`
        };
        const news = {
            template: `<div>新闻列表</div>`
        };
        const play = {
            template: `<div>娱乐列表</div>`
        };

        // 三个小组件
        const rock = {
            template: `<div>摇滚音乐列表</div>`
        };
        const classical = {
            template: `<div>古典音乐列表</div>`
        };
        const pop = {
            template: `<div>流行音乐列表</div>`
        };


        // 3.创建路由规则 是一个数组
        // const abc = [
        // 路由重定向,如果打开的页面是空白 url是 / ,默认指定跳转某个地址
        // {
        //     path: '/',
        //     redirect: '/music'
        // },
        // path是路径 表示的是路由地址
        //     {
        //         path: '/music',
        //         component: music
        //     },
        //     {
        //         path: '/movie',
        //         component: movie
        //     },
        //     {
        //         path: '/news',
        //         component: news
        //     },
        //     {
        //         path: '/play',
        //         component: play
        //     }
        // ]

        // 4.创建路由实例并挂载规则
        const router = new VueRouter({
            // routes: abc
            routes: [
                // 路由重定向, 如果打开的页面是空白 url是 / , 默认指定跳转某个地址 
                {
                    path: '/',
                    redirect: '/music'
                },
                //  path是路径 表示的是路由地址
                {
                    path: '/music',
                    component: music,
                    children: [{
                            path: '/music/rock',
                            component: rock
                        },
                        {
                            path: '/music/classical',
                            component: classical
                        },
                        {
                            path: '/music/pop',
                            component: pop
                        }
                    ]
                },
                {
                    path: '/movie',
                    component: movie
                },
                {
                    path: '/news',
                    component: news
                },
                {
                    path: '/play',
                    component: play
                }
            ]
        })

        const vm = new Vue({
            el: '#app',
            data: {

            },
            methods: {},
            // 5.将路由实例  挂载给 vue实例
            router: router
        })
    </script>
</body>

</html>